<template>
    <page>
        <roll class="fit">
            <m-loading :show="!ajax_delay_once" class="absfit"></m-loading>
            <div class="white-bg">
                <template v-for="item in list">
                    <p class="h44 bg2 white tc">{{item.name}}</p>
                    <table class="table" border="1" cellspacing="0">
                        <thead>
                        <tr>
                            <td></td>
                            <td v-for="oil in oils">{{oil}}</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="i2 in $g.memberList">
                            <td>
                                {{i2.groupName}}
                                <!--<p class="f12 c7">{{i2.minIntegral}}</p>-->
                            </td>
                            <td v-for="oil in oils">{{handlerRate(item, i2.id, oil)}}</td>
                        </tr>
                        </tbody>
                    </table>
                </template>
            </div>
            <p class="f12 px12 mt10 text2">您当前会员等级是{{$store.getters.userInfo.groupName}}</p>
            <p class="f12 px12 text2">会员等级规则是根据用户当月所获得积分决定下月会员等级</p>
        </roll>
    </page>
</template>
<script>
  import oils from '@/utils/油品'

  const 油品 = ['0#', '92#', '95#', '98#']
  export default {
    data () {
      return {
        ajax_delay_once: false,
        list: [],
        form: {},
        oils: 油品
      }
    },
    computed: {},
    async created () {
      /*-----stupid backend------*/
      const 会员类型id列表 = (await $g.memberListAsync()).map(x => x.id)
      let {obj} = await this.$get_delay_once('admin/integral/getIntgralRuleByMemberGroup', {
        memberGroupon: this.$store.getters.userInfo.memberGroup
      })
      // 提取门店
      const 全部门店名称 = Array.from(new Set(obj.map(x => x.shopName)))

      // 提取门店规则
      const 全部门店规则 = 全部门店名称.map(shopName => {

        const 当前门店全部规则 = obj.filter(x => x.shopName == shopName)

        const 会员类型id映射 = {}
        会员类型id列表.forEach(id => {
          const 当前会员类型全部规则 = 当前门店全部规则.filter(x => x.memberGroup == id)
          // console.log(id, 当前门店全部规则, 当前会员类型全部规则)
          // console.log(id)
          const 油品映射 = {}
          油品.forEach(oli => {
            油品映射[oli] = 当前会员类型全部规则.find(x => {
              //console.log(id, oils.equal(x.oilCode,oli), x.oilCode, oli)
              return oils.equal(x.oilCode, oli)
            })
          })
          会员类型id映射[id] = 油品映射
        })

        return {
          name: shopName,
          memberMap: 会员类型id映射
        }
      })
      this.list = 全部门店规则
    },
    methods: {
      handlerRate (memberMap, memeberId, oil) {
        const rate = memberMap.memberMap[memeberId][oil]
        if (rate) {
          const unit = rate.isMoney ? '元' : '升'
          return `1${unit}=${rate.rate}分`
        } else {
          return '-'
        }
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .table {
        width: 100%;
        table-layout: fixed;
        text-align: center;
        font-size: 12px;
        td {
            vertical-align: middle;
            height: 50px;
        }
    }

    table, table tr th, table tr td {
        border: 1px solid #dcdcdc;
    }
</style>
